<template>
	<view class="layout">
		<view class="layout-main" :class="{ skelett: isSkelett }">
			<view class="layout-main-item" :key="index" v-for="(item, index) in withdrawalsRecordList">
				<view class="layout-main-item-main">
					<view class="layout-main-item-main-left">
						<view>{{ item.statusStr }}</view>
						<view>{{ item.createTime }}</view>
					</view>

					<view class="layout-main-item-main-right">{{ item.moneyYuan }}</view>
				</view>

				<view class="layout-main-item-hint" v-if="item.isFail">
					<image :src="hintIcon" />
					<text>您的本次提现失败，提现金额已返回账户，如有疑问可联系客服</text>
				</view>
			</view>
		</view>

		<view class="layout-footer" :class="{ isFixed: 'nodata' === isHintStatus }">
			<DistributionHint :type="isHintStatus" />
		</view>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';
import { getWithdrawalApply } from '@/api/other';

import DistributionHint from '@/components/distributionHint';

const hintIcon = Object.freeze(`${defaultImageUrl}icon/icon_txsb_ts.png`);

export default {
	data() {
		return {
			hintIcon,
			requestParams: {
				pageIndex: 1,
				pageSize: 20
			},

			isSkelett: true,
			isHintStatus: '', // nomore  nodata
			withdrawalsRecordList: [{}, {}, {}]
		};
	},

	created() {
		this.getPageData();
	},

	methods: {
		getPageData(pageIndex = this.requestParams.pageIndex) {
			const {
				requestParams: { pageSize }
			} = this;

			getWithdrawalApply({
				pageIndex,
				pageSize
			}).then((res) => {
				const isPageIndex = pageIndex === 1;

				const filterList = (res?.data?.records || []).map((item) => {
					const { status, moneyYuan, ...otherParams } = item;

					// <!-- 提现状态：1-提现中 2-已提现 -1提现失败 -2已取消 -->
					return {
						...otherParams,
						isFail: status === -1,
						moneyYuan: `￥${moneyYuan}`
					};
				});

				this.requestParams.pageIndex = pageIndex;
				this.withdrawalsRecordList = isPageIndex ? filterList : [...this.withdrawalsRecordList, ...filterList];

				this.isSkelett = false;
				this.isHintStatus = isPageIndex && !filterList.length ? 'nodata' : filterList.length < pageSize ? 'nomore' : '';
			});
		}
	},

	onReachBottom() {
		const {
			isHintStatus,
			requestParams: { pageIndex }
		} = this;

		if (isHintStatus) {
			return;
		}

		this.isHintStatus = 'loading';
		this.getPageData(pageIndex + 1);
	},

	components: {
		DistributionHint
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	@include Db_iosBottomDistance();

	&-main {
		padding: 24rpx 20rpx 0;

		&-item {
			margin-top: 20rpx;
			min-height: 124rpx;
			border-radius: 12rpx;
			background: #fff;

			&-main {
				padding: 24rpx 28rpx;
				font-weight: bold;

				display: flex;
				align-items: center;
				justify-content: space-between;

				&-left {
					color: #1f1f1f;
					font-size: 28rpx;

					view:last-child {
						color: #999;
						font-size: 24rpx;
						margin-top: 2rpx;
						font-weight: 400;
					}
				}

				&-right {
					font-size: 32rpx;

					@include Db_moneyStyle();
				}
			}

			&-hint {
				height: 72rpx;
				background: #fff3ec;
				border-radius: 0px 0px 12rpx 12rpx;

				display: flex;
				align-items: center;
				justify-content: center;

				color: #f55f4e;
				font-size: 22rpx;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
					vertical-align: bottom;
				}
			}

			&:first-child {
				margin-top: 0;
			}
		}

		&.skelett {
			.layout-main-item-main-left {
				view {
					width: 160rpx;
					height: 34rpx;

					border-radius: 8rpx;
					background: $skelettBgColor;

					&:first-child {
						width: 90rpx;
						height: 40rpx;
					}
				}
			}

			.layout-main-item-main-right {
				width: 120rpx;
				height: 32rpx;

				border-radius: 8rpx;
				background: $skelettBgColor;
			}
		}
	}

	&-footer {
		&.isFixed {
			position: absolute;
			top: 260rpx;
			left: 0;
			right: 0;
		}
	}
}
</style>
